(function (wp) {
    const { registerBlockType } = wp.blocks;
    const { createElement: el, Fragment } = wp.element;
    const { InspectorControls } = wp.blockEditor || wp.editor;
    const { PanelBody, TextControl, TextareaControl, ToggleControl } = wp.components;
    registerBlockType("allspice/mealplan-feature", {
        title: "Allspice Meal Plan Feature",
        icon: "star-filled",
        category: "widgets",
        attributes: {
            productId: { type: "string", default: "" },
            headline: { type: "string", default: "" },
            description: { type: "string", default: "" },
            ctaLabel: { type: "string", default: "" },
            showPrice: { type: "boolean", default: true },
            showMeta: { type: "boolean", default: true },
        },
        edit: function (props) {
            const { attributes, setAttributes } = props;
            const productId = typeof attributes.productId === "string" ? attributes.productId : "";
            const headline = typeof attributes.headline === "string" ? attributes.headline : "";
            const description = typeof attributes.description === "string" ? attributes.description : "";
            const ctaLabel = typeof attributes.ctaLabel === "string" ? attributes.ctaLabel : "";
            return el(
                Fragment,
                {},
                el(
                    InspectorControls,
                    {},
                    el(
                        PanelBody,
                        { title: "Plan", initialOpen: true },
                        el(TextControl, {
                            label: "Product ID",
                            help: "The meal-plan product to feature. Copy it from the Allspice dashboard's product page.",
                            value: productId,
                            onChange: function (v) {
                                setAttributes({ productId: v });
                            },
                        }),
                        el(ToggleControl, {
                            label: "Show price",
                            checked: attributes.showPrice !== false,
                            onChange: function (v) {
                                setAttributes({ showPrice: !!v });
                            },
                        }),
                        el(ToggleControl, {
                            label: "Show plan facts (days, meals)",
                            checked: attributes.showMeta !== false,
                            onChange: function (v) {
                                setAttributes({ showMeta: !!v });
                            },
                        })
                    ),
                    el(
                        PanelBody,
                        { title: "Copy overrides (optional)", initialOpen: false },
                        el(TextControl, {
                            label: "Headline",
                            help: "Leave empty to use the plan's own name.",
                            value: headline,
                            onChange: function (v) {
                                setAttributes({ headline: v });
                            },
                        }),
                        el(TextareaControl, {
                            label: "Description",
                            help: "Leave empty to use the plan's own description.",
                            value: description,
                            onChange: function (v) {
                                setAttributes({ description: v });
                            },
                        }),
                        el(TextControl, {
                            label: "Button label",
                            help: "Leave empty for \"View this plan\".",
                            value: ctaLabel,
                            onChange: function (v) {
                                setAttributes({ ctaLabel: v });
                            },
                        })
                    )
                ),
                el(
                    "div",
                    {
                        style: {
                            border: "1px dashed #ddd",
                            padding: "12px",
                            borderRadius: "6px",
                        },
                    },
                    el("strong", {}, headline || "Meal Plan Feature"),
                    el(
                        "div",
                        { style: { marginTop: "4px", opacity: 0.75, fontSize: "12px" } },
                        productId
                            ? "Features product " + productId + " with its cover images, description and price. Readers tap through to the plan in the Allspice widget."
                            : "Set a Product ID in the block settings to feature a meal plan here."
                    )
                )
            );
        },
        save: function () {
            return null;
        },
    });
})(window.wp);